<template>
	<view>
		<uni-nav-bar :title="sortName" leftIcon="arrowleft" @clickLeft="back">
		</uni-nav-bar>
		<view class="content">
		        <view style="margin-top: 20upx;">
		             <zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs">
		             </zzx-tabs>
		        </view> 
		        <view style="margin-top: 20upx;color:#999999;font-size: 24upx;height: 260upx;">
		            <view v-show="current===i" v-for="(item,i) in Arr" :key="item.id">
						<view v-for="(item, i) in item.booksList" :key="i" class="bookListBox">
						    <view class="img">
						    	<cover-image :src="item.booksCover"></cover-image>
						    </view>
							<view class="textBox">
								<view>
									<view class="title">
										{{item.booksName}}
									</view>
									<view class="author">
										{{item.author}}
									</view>
								</view>
								<view class="description">
									{{item.booksDescription}}
								</view>
							</view>
						</view>
		            </view>
		        </view>
		    </view>
	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	export default {
		data() {
			return {
				items: [],
				current: 0,
				id: '',
				sortName: '',
				Arr: [{
							"id": 24,
							"channelId": 4,
							"sortName": "东方玄幻",
							"parentId": 1,
							"bookCount": null,
							"booksList": [
								{
									"id": 15,
									"booksName": "衍仙纪",
									"author": "衍仙纪作者",
									"sortId": "24",
									"booksCover": "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2267510489,2048617000&fm=26&gp=0.jpg",
									"booksDescription": "hi哦维权活动保护地哦，电话记录比例，厚度仅为v给i给，黑i晚礼服欸各分包成本，肺活i分红率发货了。不对劲了吧。"
								},
								{
									"id": 16,
									"booksName": "仙侠传",
									"author": "仙侠传作者",
									"sortId": "24",
									"booksCover": "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1252203044,2637459046&fm=26&gp=0.jpg",
									"booksDescription": "为一部甜宠剧，《传闻中的陈芊芊》不仅有主角们过硬的颜值，还有干净利落的剧情，更有足够的社会热点，引发的思考的主题的。所以，《传闻中的陈芊芊》很有潜力能成为一匹在国产网剧中冲出重围的黑马，一举成为今年夏天的流量爆款"
								}
							]
					},
					{
								"id": 25,
								"channelId": 4,
								"sortName": "低功耗",
								"parentId": 1,
								"bookCount": null,
								"booksList": [
									{
										"id": 15,
										"booksName": "衍仙纪",
										"author": "衍仙纪",
										"sortId": "24",
										"booksCover": "url",
										"booksDescription": ""
									}
								]
						},
					{
								"id": 26,
								"channelId": 4,
								"sortName": "叔本华",
								"parentId": 1,
								"bookCount": null,
								"booksList": [
									{
										"id": 15,
										"booksName": "衍仙纪",
										"author": "衍仙纪",
										"sortId": "24",
										"booksCover": "url",
										"booksDescription": ""
									}
								]
						},
				    {
				    			"id": 27,
				    			"channelId": 4,
				    			"sortName": "蝴蝶结",
				    			"parentId": 1,
				    			"bookCount": null,
				    			"booksList": [
				    				{
				    					"id": 15,
				    					"booksName": "衍仙纪",
				    					"author": "衍仙纪",
				    					"sortId": "24",
				    					"booksCover": "url",
				    					"booksDescription": ""
				    				}
				    			]
				    	}
					],
                }
		},
		components: {
			zzxTabs
		},
		onLoad(option) {
			this.id = option.id
			this.sortName = option.name
			console.log(option.id, option.name)
		},
		created() {
			// uni.request({
			// 	url: 'http://localhost:8001/classify/secondClassify/' + this.id,
			// 	method:'get',
			// 	success(res) {
			// 		console.log(res)
			// 	}
			// })
			const arr = this.Arr.map(item=> item.sortName)
			this.items = arr
			console.log(arr)
		},
		onReady() {
			
		},
		methods: {
			onClickItem(e) {
				console.log(e)
			  if (this.current !== e.currentIndex) {
			      this.current = e.currentIndex;
			  }
			},
			back() {
				uni.navigateBack()
			}
			}
		
	}
</script>

<style>
	.img {
		width: 20%;
		height: 200rpx;
	}
	cover-image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.textBox {
		display: inline-block;
		width: 75%;
		height: 200rpx;
	}
	.bookListBox {
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		 justify-content: space-between;
	}
	.title {
		color: #000000;
		font-size: 18px;
	}
	.author {
		font-size: 12px;
		color: #666;
	}
	.description {
		margin-top: 10px;
		height: 100rpx;
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
</style>
